import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Switch,
} from 'react-native';
import { useAppContext } from '../context/AppContext';
import { useTheme } from '../context/ThemeContext';
import { createThemedStyles } from '../utils/themeStyles';

interface ThemeToggleProps {
  showLabel?: boolean;
  style?: any;
}

const ThemeToggle: React.FC<ThemeToggleProps> = ({ 
  showLabel = true, 
  style 
}) => {
  const { state, toggleDarkMode } = useAppContext();
  const { theme, isDark } = useTheme();
  const themedStyles = createThemedStyles(theme);

  const handleToggle = () => {
    toggleDarkMode();
  };

  return (
    <View style={[styles.container, style]}>
      {showLabel && (
        <View style={styles.labelContainer}>
          <Text style={styles.icon}>{isDark ? '🌙' : '☀️'}</Text>
          <Text style={[themedStyles.body, styles.label]}>
            {isDark ? '深色模式' : '浅色模式'}
          </Text>
        </View>
      )}
      
      <Switch
        value={state.darkMode}
        onValueChange={handleToggle}
        trackColor={{
          false: theme.border,
          true: theme.primary,
        }}
        thumbColor={state.darkMode ? theme.buttonText : theme.textSecondary}
        ios_backgroundColor={theme.border}
        style={styles.switch}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  
  labelContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  
  icon: {
    fontSize: 20,
    marginRight: 12,
  },
  
  label: {
    fontSize: 16,
    fontWeight: '500',
  },
  
  switch: {
    transform: [{ scaleX: 1.1 }, { scaleY: 1.1 }],
  },
});

export default ThemeToggle;